<template>
  <div>
    <div id="scalePie" ref="scalePie" style="height:543px;margin-bottom:16px;"></div>
  </div>
</template>

<script>
import echarts from 'echarts'
export default {
  name: 'ScalePie',
  props: {
    chartData: Array
  },
  data () {
    return {
      mychart: {}
    }
  },
  mounted () {
    this.initChart()
    window.addEventListener('resize', () => {
      setTimeout(() => {
        this.mychart.resize()
      }, 500)
    })
  },
  watch: {
    chartData: {
      handler (newVal, oldVal) {
        this.initChart()
      },
      deep: true
    }
  },
  methods: {
    initChart () {
      this.mychart = echarts.init(this.$refs.scalePie)
      var data = this.chartData

      var titleArr = []
      var seriesArr = []
      const colors = [
        ['#389af4', '#dfeaff'],
        ['#ff8c37', '#ffdcc3'],
        ['#ffc257', '#ffedcc'],
        ['#fd6f97', '#fed4e0'],
        ['#a181fc', '#e3d9fe']
      ]
      data.forEach(function (item, index) {
        titleArr.push({
          text: item.name,
          left: '50%',
          top: index * 50 + 40 + '%',
          textAlign: 'center',
          textStyle: {
            fontWeight: 'normal',
            fontSize: '16',
            color: colors[index][0],
            textAlign: 'center'
          }
        })
        seriesArr.push({
          name: item.name,
          type: 'pie',
          clockWise: false,
          radius: [60, 70],
          itemStyle: {
            normal: {
              color: colors[index][0],
              shadowColor: colors[index][0],
              shadowBlur: 0,
              label: {
                show: false
              },
              labelLine: {
                show: false
              }
            }
          },
          hoverAnimation: true,
          center: ['50%', index * 50 + 25 + '%'],
          data: [
            {
              value: item.scale,
              label: {
                normal: {
                  formatter () {
                    return item.name.substring(3) + ':' + item.scale + '%'
                  },
                  show: true,
                  textStyle: {
                    color: '#fff'
                  }
                }
              },
              labelLine: {
                show: true
              }
            },
            {
              value: 100 - item.scale,
              name: item.name,
              itemStyle: {
                normal: {
                  color: colors[index][1]
                },
                emphasis: {
                  color: colors[index][1]
                }
              },
              label: {
                normal: {
                  formatter () {
                    return item.value
                  },
                  position: 'center',
                  show: true,
                  textStyle: {
                    fontSize: '20',
                    fontWeight: 'bold',
                    color: colors[index][0]
                  }
                }
              }
            }
          ]
        })
      })

      const option = {
        backgroundColor: 'rgb(12,16,61)',
        title: titleArr,
        series: seriesArr
      }
      this.mychart.setOption(option)
    }
  }
}
</script>

<style lang="less" scoped></style>
